<template>
  <div class="item">

    <div class="img">
      <img @click="handleClick(item)" :src="item.img | wh('64.90')" alt="">
    </div>
    <div class="main">
      <div class="content">
        <h2>
          {{item.nm}}
          <span class="version" :class="item.version"></span>
        </h2>
        <p>观众评
          <span class="score">{{item.sc}}</span>
        </p>
        <p class="star">主演: {{item.star}} </p>
        <p>{{item.showInfo}} </p>
      </div>

      <div class="btn">
        <button class="red" v-if="item.globalReleased">购票</button>
        <button class="blue" v-if="!item.globalReleased">预售</button>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  props: ["item"],
  methods: {
    handleClick(item) {
      //错误的写法
      // this.$router.push({path:'/detail',params:item})
      //存在缺陷，刷新页面数据会丢失
      // this.$router.push({name:'detail',params:item})
      this.$router.push({path:'/detail',query:item})
    }
  }
}
</script>



<style lang="scss" scoped>
@import "@/assets/style/mixin.scss";

.item {
  display: flex;
  margin: 20px 10px 20px 10px;
  /*  */
  .img {
    width: 64px;
    height: 90px;
    img {
      width: 100%;
    }
  }
  .main {
    @include border1px(rgb(110, 109, 109));
    display: flex;
    flex: 1;
    .content {
      width: 0;
      flex: 1;
      margin-left: 8px;
      h2 {
        font-size: 17px;
        color: #333;
      }
      p {
        font-size: 13px;
        color: #666;
        line-height: 22px;
      }

      .score {
        font-size: 15px;
        color: #faaf00;
      }
      .star {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        width: 100%;
      }
    }
    .btn {
      width: 80px;
      display: flex;
      justify-content: center;
      align-items: center;
      button {
        width: 47px;
        height: 27px;
        border: none;
        border-radius: 6px;
        font-size: 12px;
        color: white;
      }
      .red {
        background: red;
      }
      .blue {
        background: blue;
      }
    }

    &::before {
      top: auto !important;
      bottom: -8px;
    }
  }
}
.version {
  height: 14px;
  width: 17px;
  display: inline-block;
  background-size: cover;
}
.version.v2d.imax {
  width: 43px;
  background-image: url();
}
</style>

